<template>
  <div class="zhi">
    <!-- 头部标签 -->
    <van-nav-bar
      title="小智同学"
      class="search-title"
      fixed
      z-index="99"
      left-arrow
      @click-left="$router.back()"
    >
    </van-nav-bar>
    <!-- 聊天内容 -->
    <div class="box" ref="chat">
      <div class="item" v-for="(item, index) in chatArr" :key="index">
        <img :class="{userimg: item.isRobot === false}" src="http://img2.imgtn.bdimg.com/it/u=3773989177,2653256171&fm=214&gp=0.jpg" alt="">
        <div class="content" :class="{usercontent: item.isRobot === false}">
          <div>{{ item.content }}</div>
        </div>
      </div>
    </div>
    <!-- 底部区域 -->
    <van-search class="zhi-search" left-icon="" background="#3e9df8" shape="round" v-model="value" show-action @search="onSearch">
      <template #action>
        <van-button type="primary" @click="onSearch">发送</van-button>
      </template>
    </van-search>
  </div>
</template>

<script>
// 导入socket包
import socket from 'socket.io-client'

export default {
  data () {
    return {
      value: '',
      // 聊天
      chatArr: [
        { content: '你好你好，我是小智同学', isRobot: true },
        { content: '小智，我刀呢？aaaaaaaaaaaaaa', isRobot: false }
      ],
      socket: null
    }
  },
  methods: {
    onSearch () {
      if (this.value === '') {
        this.$toast('请先输入内容')
        return
      }
      console.log('搜搜')
      this.chatArr.push({
        content: this.value,
        isRobot: false
      })
      // 发送数据
      this.socket.emit('message', {
        msg: this.value,
        timestamp: Date.now()
      })
      // 让聊天区域超出内容之后，自动滚到底部
      this.$nextTick(() => {
        this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight
      })
      // 清空输入框
      this.value = ''
    }
  },
  mounted () {
    // 请求聊天机器人的接口
    this.socket = socket(`http://ttapi.research.itcast.cn?token=${this.$store.state.userInfo.token}`)
    // 接收数据
    this.socket.on('message', data => {
      this.chatArr.push({
        content: data.msg,
        isRobot: true
      })
      // 让聊天区域超出内容之后，自动滚到底部
      this.$nextTick(() => {
        this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight
      })
    })
  }
}
</script>

<style lang="less" scoped>
.zhi {
  .search-title {
    background-color: #3e9df8;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
  }

  /deep/ .van-nav-bar .van-icon {
    color: #fff;
  }

  .zhi-search{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  .box{
    width: 100%;
    position: fixed;
    top: 46px;
    bottom: 64px;
    left: 0;
    font-size: 14px;
    background-color: #fcfcfc;
    overflow: auto;

    .item{
      margin: 10px;
      overflow: hidden;
      img{
        float: left;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }

      .content{
        float: left;
        padding: 10px;
        background-color: #eee;
        border-radius: 5px;
        max-width: 70%;
        white-space:normal;
        word-break:break-all;
      }

      .userimg{
        float: right;
        margin-right: 0;
        margin-left: 10px;
      }

      .usercontent{
        float: right;
      }
    }
  }
}
</style>
